// @unocss-include
.msg {
  --at-apply: "w-full max-w-full flex gap-2 px-2 py-3 leading-1.4em";
  transition: background-color 0.2s;
  .body {
    --at-apply: "flex-1 max-w-4/5 sm:max-w-full  lg:max-w-30em";
  }
  // 头像
  .avatar {
    --at-apply: "h-2.4rem w-2.4rem flex-shrink-0 rounded-1/2 object-cover border-default";
  }
  .nickname {
    vertical-align: bottom;
  }
  .sendTime {
    transition: none;
  }
  &:hover {
    .sendTime {
      opacity: 0.6;
    }
  }
  .ai-reply-msg-popper,
  .msg-popper {
    --at-apply: "overflow-x-hidden  text-0.9rem max-w-full w-fit  p-2 px-3 leading-1.5em bg-color shadow-md";
    box-shadow:
      rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
      rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    border-radius: 6px 1rem 1rem 1rem;
  }
  .msg-wrap {
    word-break: break-all;
    white-space: pre-wrap;
  }

  // 回复
  .reply {
    --at-apply: "text-0.75rem cursor-pointer w-fit card-rounded-df max-w-full truncate  px-2  bg-color dark:text-light-900 border-default-hover";
  }
  // 翻译
  .translation {
    --at-apply: "text-0.8rem w-fit card-rounded-df py-2 px-3 inline-block card-bg-color dark:text-light-900";
  }
  // 问答
  .ask-ai {
    --at-apply: "w-fit flex cursor-pointer items-center truncate px-2 py-1 text-xs card-default border-default-hover ";
  }
  // 通知
  .notice-all {
    --at-apply: "max-w-full text-0.75rem w-fit  truncate flex-ml-a w-fit cursor-pointer truncate px-2 text-[--el-color-warning] card-default";
  }
  // @用户
  .at-list {
    --at-apply: "max-w-full text-0.75rem w-fit  truncate flex-ml-a w-fit cursor-pointer truncate px-2 text-color-info card-default";
  }
  .flex-mr-a {
    margin-left: auto;
  }
}
// 系统
.notice {
  --at-apply: "p-3 hover:(shadow-md) inline-block  cursor-pointer transition-all !bg-color";
}
// .self .notice {
//   .popper {
//     --at-apply: "bg-[var(--el-color-primary)] dark:bg-[var(--el-color-primary)] text-white";
//   }
// }
// 回复 - 闪动
.reply-shaing {
  --at-apply: "rounded-6px w-full bg-[var(--el-color-primary-light-7)] op-100 transition-120 ";
}

.body {
  --at-apply: "flex flex-col gap-2";
}
.flex-res {
  display: flex;
  gap: 0.5rem;
}
.self {
  ::selection {
    background-color: #f0f0f0 !important;
    color: #010101 !important;
  }
  &.msg {
    --at-apply: "px-2 py-3 ";
  }
  .body {
    align-items: end;
  }
  padding-left: 4em;
  margin-left: auto;
  .file,
  .flex-res {
    flex-direction: row-reverse;
  }
  .nickname {
    margin-left: auto;
    vertical-align: bottom;
  }
  .flex,
  .flex-ml-a {
    margin-left: auto;
    // align-items: end;
  }
  .flex-mr-a {
    margin-right: auto;
  }
  flex-direction: row-reverse;
  .flex-row {
    margin-left: auto;
    flex-direction: row-reverse;
  }
  .msg-popper,
  .self-child {
    margin-left: auto;
    border-radius: 1rem 4px 1rem 1rem;
    --at-apply: "bg-[var(--el-color-primary)] dark:bg-[var(--el-color-primary)] text-white";
  }
  .flex-col {
    justify-content: right;
  }
}
